<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let showit = ref(true);
    // 隐藏指示点
    let onChange = (index) => {
      if (index == 2) {
        showit.value = false;
      } else {
        showit.value = true;
      }
    };
    // 跳转页面
    const router = useRouter();
    let gohome = () => {
      router.push("/pages/loginView");
    };
    // 跳过
    let jump = () => {
      router.push("/pages/loginView");
    };

    return {
      showit,
      onChange,
      gohome,
      jump,
    };
  },
};
</script>


<template>
  <div class="boot">
    <div class="jump" v-if="showit" @click="jump">跳过</div>

    <van-swipe
      class="my-swipe big wrap"
      :show-indicators="showit"
      indicator-color="#ffffff"
      :loop="false"
      @change="onChange"
      ref="big"
    >
      <van-swipe-item class="items"
        ><div class="item no1"><div class="page1"></div></div
      ></van-swipe-item>

      <van-swipe-item class="items"
        ><div class="item no2"><div class="page2"></div></div>
      </van-swipe-item>

      <van-swipe-item class="items">
        <div class="item no3">
          <div class="page3">
            <!-- 进入按钮 -->
            <div class="btn" @click="gohome">
              <svg
                t="1669125448469"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5634"
                width="200"
                height="200"
              >
                <path
                  d="M916.70478 440.270049L531.68078 217.987122c-21.079415-12.188098-47.953171-13.08722-70.631024 0s-35.365463 36.764098-35.365463 61.140293v97.304975H127.37561c-34.766049 0-62.938537 28.172488-62.938537 62.938537v145.258146c0 34.766049 28.172488 62.938537 62.938537 62.938537h298.308683v90.411707c0 26.673951 13.886439 52.748488 38.662244 67.034537 24.775805 14.385951 54.247024 13.386927 77.524292 0l374.833951-216.388683c25.674927-14.685659 42.858146-42.458537 42.858147-74.227512 0-31.469268-17.18322-59.242146-42.858147-74.12761z"
                  p-id="5635"
                  fill="#ffffff"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>



<style lang="scss" scoped>
.boot {
  width: 100%;
  position: relative;
  left: 0px;
  bottom: 0px;
  z-index: 999;
}
.boot .jump {
  width: 50px;
  height: 20px;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  position: fixed;
  top: 20px;
  right: 20px;
  // background-color: red;
  box-sizing: border-box;
  border: 1px solid #fff;
  z-index: 999;
  text-align: center;
  line-height: 20px;
}
.boot .big {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.boot .items {
  width: 100%;
  height: 100%;
  .no1 {
    width: 100%;
    height: 100%;
    background-color: red;
    position: relative;
    .page1 {
      position: absolute;
      top: 0px;
      height: 0px;
      width: 100%;
      height: 100%;
      background: url(../assets/img/page1.png) no-repeat center;
      background-size: 100%;
    }
  }
  .no2 {
    width: 100%;
    height: 100%;
    background-color: red;
    position: relative;
    .page2 {
      position: absolute;
      top: 0px;
      height: 0px;
      width: 100%;
      height: 100%;
      background: url(../assets/img/page2.png) no-repeat center;
      background-size: 100%;
    }
  }
  .no3 {
    width: 100%;
    height: 100%;
    background-color: red;
    position: relative;
    .page3 {
      position: absolute;
      top: 0px;
      height: 0px;
      width: 100%;
      height: 100%;
      background: url(../assets/img/page3.png) no-repeat center;
      background-size: 100%;
      position: relative;

      .btn {
        width: 50px;
        height: 50px;
        background-color: rgba($color: red, $alpha: 0.3);
        border-radius: 50%;
        border: none;
        position: absolute;
        left: 44%;
        top: 87%;
        display: flex;
        align-items: center;
        justify-content: center;
        // display: none;
        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
::v-deep .van-swipe__indicators .van-swipe__indicator {
  width: 6px;
  height: 6px;
  box-sizing: border-box;
  border-radius: 3px;
}

::v-deep
  .van-swipe__indicators
  .van-swipe__indicator.van-swipe__indicator--active {
  width: 20px;
  height: 6px;
  border-radius: 3px;
  background-color: yellow;
}
</style>